<template>
    <div class="alarmRank">
        <div class="list_box-item" v-for="(item, index) in items" :key="index">
            <p class="list_box-item-font">
                <img v-if="index == 0" src="@/assets/images/alarm_top1.png" alt="">
                <img v-if="index == 1" src="@/assets/images/alarm_top2.png" alt="">
                <img v-if="index == 2" src="@/assets/images/alarm_top3.png" alt="">
                <span> Top{{ index + 1 }}</span>
                <span>{{ item.name }}</span>
            </p>
            <el-progress 
                class="progress" 
                :percentage="Number(item.value)" 
                :format="format"
                :color="index==0?'#FF3A30':index==1?'#FF9502':index==2?'#FFCC01':'#B3B3B3'"
            ></el-progress>
        </div>
    </div>
</template>

<script>
export default {
    name: "alarmRank",
    components: {},
    data() {
        return {
        }
    },
    props: {
        items: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    computed: {},
    methods: {
        format(percentage) {
            return `${percentage}`;
        },
    },
    created() { },
    mounted() { },
    beforeDestroy() { },
};
</script>

<style lang="less" scoped>
.alarmRank {
    width: 100%;
    padding: 10px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;

    .list_box-item {
        margin-bottom: 15px;

        p {
            margin-top: 0;
            margin-bottom: 8px;

            img {
                vertical-align: middle;
            }

            span {
                font-weight: bold;
                font-size: 16px;
                color: #333333;
                vertical-align: middle;
                margin-right: 10px;
            }
        }

        .progress {
            width: 98%;

            ::v-deep .el-progress-bar__outer {
                height: 10px !important;
            }

            ::v-deep .el-progress-bar {
                box-sizing: initial;
                margin-top: -3px;
            }

            ::v-deep .el-progress__text {
                position: absolute;
                right: 0;
                top: -32px;
                font-weight: bold;
                font-size: 20px !important;
            }

        }
    }
}
</style>